<template>
		<view class="collectrPage">
			<!-- 顶部的TabBar设计 -->
			<view class="tabbar">
				<block v-for="item in tabs" :key="item.id">
					<view @click="changeTab(item.id)" class="tab" 
					:class="{'active':item.select}">{{item.name}}</view>
				</block>
			</view>
			<view class="line" style="margin-top: 100rpx;"></view>
			<!-- v-if 用于删除一个元素  v-show 多用于频繁的切换操作，但是不会隐藏这个元素 -->
			<view v-show="tabs[0].select" class="part">
				<collection></collection>
				<collection></collection>
				<collection></collection>
			</view>
			<view v-show="tabs[1].select" class="part">
				<collection></collection>
				<collection></collection>
				<collection></collection>			
				<collection></collection>
				<collection></collection>
				<collection></collection>
				<collection></collection>
				<collection></collection>
				<collection></collection>
				<collection></collection>
			</view>
		</view>
		<!-- <view class="collect-invitation">
			<collection></collection>
			<collection></collection>
			<collection></collection>
			<collection></collection>
			
		</view> -->

</template>

<script>
	import collection from '../../components/invitation.vue'
	export default {
		data() {
			return {
				tabs:[
					{id:1,name:'我的收藏',select:true},
					{id:2,name:'曾住酒店',select:false}
				]}
		},
		components: {
			collection,
		},
		methods: {
			changeTab(id){
				this.tabs.forEach(item => {
				//先将所有的选项变为没有颜色
				//值关系：从右向左
					item.select = false
					//再将选中的选项select设置为true
					// == 等于符号
					if(item.id == id){
						item.select = true
						}
				})
			}
		}
	}
</script>

<style>
.collectrPage {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #F1F3F4;
}
.tabbar{
		display: flex;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100rpx;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #fff;
	}
	.tab{
		width: 150rpx;
		height: 70rpx;
		/* border: 2rpx solid black; */
		align-items: center;
	}
	/* 设置一个被选中的样式 */
	.active{
		/* background-color: red; */
		border-bottom: 5rpx solid greenyellow;
		color: balck;
	}
	.line {
		height: 10rpx;
		background-color: #f1f3f4;
	}
</style>
